<template>
  <div class="image_upload">
    <div class="image_upload_file">
      <div
        class="image_upload_file_load"
        @dragover="over"
        @drop="drop"
        @click="getImage"
      >
        <input
          type="file"
          :name="rules.name"
          :id="rules.id"
          :accept="rules.accept"
          @change="upload"
        />
        <span>点击/拖拽上传</span>
      </div>
      <div class="image_upload_file_preview">
        <div
          class="image_upload_file_preview_box"
          v-for="(item, index) in imageUrl"
          :key="index"
          @click="imageClick(index)"
        >
          <img ref="image" :src="item" alt="xxxx" width="45" height="90" />
          <div>click</div>
        </div>
      </div>
    </div>
    <div class="image_upload_color">
      <div class="image_upload_color_dominant">
        <div
          v-if="dominantColor"
          :style="{ backgroundColor: dominantColor }"
        ></div>
      </div>
      <div class="image_upload_color_palette">
        <div class="palette" v-for="(item, index) in palette" :key="index">
          <div class="palette" :style="{ backgroundColor: item }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import colorthief from "colorthief";
import Iimage from "@/interface/Iimage";

@Component({
  components: {},
})
export default class ImageUpload extends Vue {
  @Prop(Object) rules!: Iimage;
  imageUrl: Array<string> = [];

  dominantColor = "";

  palette: Array<string> = [];

  getImage(): void {
    document.getElementById("image")?.click();
  }

  upload(event: Event): void {
    console.log(event);
    // const file: Array<File> = event.target?.files;
    // const url = window.URL.createObjectURL(file[0]);
    // const len = this.imageUrl.length;
    // if (len >= 5) {
    //   this.imageUrl.shift();
    //   this.imageUrl.push(url);
    // } else {
    //   this.imageUrl.push(url);
    // }
  }

  over(event: DragEvent): void {
    event.preventDefault();
  }

  drop(event: DragEvent): void {
    event.preventDefault();

    const file = event.dataTransfer?.files[0];

    const url = window.URL.createObjectURL(file);

    const len = this.imageUrl.length;

    if (len >= 5) {
      this.imageUrl.shift();
      this.imageUrl.push(url);
    } else {
      this.imageUrl.push(url);
    }
  }

  imageClick(index: number): void {
    const colorThief = new colorthief();

    const images = this.$refs.image as Array<Element>;

    const judge = [0, 1, 2, 3, 4];

    if (judge.includes(index) && this.imageUrl.length != 0) {
      const dominantColorArr = colorThief.getColor(images[index]);
      this.dominantColor = `rgb(${dominantColorArr[0]},${dominantColorArr[1]},${dominantColorArr[2]})`;

      const paletteArr: Array<number[]> = colorThief.getPalette(
        images[index],
        10
      );

      this.palette.length = 0;
      paletteArr.forEach((item: Array<number>): void => {
        this.palette.push(`rgb(${item[0]},${item[1]},${item[2]})`);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.image_upload {
  width: 400px;
  height: 300px;
  border: 2px solid blue;
  border-radius: 3%;
  display: flex;
  flex-direction: row;

  &_file {
    width: 250px;
    height: 300px;
  }

  &_file_load {
    width: 250px;
    border-top-left-radius: 3%;
    height: 200px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
    line-height: 200px;

    input {
      display: none;
    }
  }

  &_file_preview {
    width: 250px;
    border-right: 1px solid gray;
    border-bottom-left-radius: 3%;
    height: 100px;

    display: flex;
    flex-direction: row;
  }

  &_file_preview_box {
    width: 50px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    &:hover {
      div {
        opacity: 1;
      }
    }

    div {
      position: absolute;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: blue;
      font-size: 8px;
      font-family: Georgia, "Times New Roman", Times, serif;
      text-align: center;
      line-height: 30px;
      opacity: 0;
    }
  }

  &_color {
    width: 150px;
    height: 300px;
  }

  &_color_dominant {
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      border-radius: 3px;
      height: 30px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px 0 rgba(0, 0, 0, 0.19);
    }
  }

  &_color_palette {
    width: 150px;
    height: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .palette {
      border-radius: 3px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px 0 rgba(0, 0, 0, 0.19);
      width: 60px;
      height: 30px;
    }
  }
}
</style>
